<template>
	<view class="fl-s-c">
		<!-- 自定义导航栏 -->
		<view class="w-1" style="position: fixed; background-color: rgba(255, 255, 255, 0.5); left: 0; top: 0; z-index: 9; overflow: hidden">
			<!-- 状态栏 -->
			<!-- <view class="status_bar"></view> -->
			<u-navbar :border-bottom="false" title="商户入驻" :background="{ background: 'rgba(255,255,255,0.5)' }"></u-navbar>
		</view>
		<image class="seller-in" src="/static/images/user/seller_in.png"></image>
		<view class="info-box relative fl-s-c">
			<text class="fs-40 fm-ali bold m-b-40" style="color: #333333">平台优质商家入驻</text>
			<!-- 店铺logo -->
			<!-- <view class="fr-s-c w-1" @click="chooseImage(0)" style="border-bottom: 2rpx solid #F4F4F4; padding: 36rpx 0;">
				<text class="left-t">店铺logo</text>
				<view class="fr-e-c flex-1">
					<image v-if="!logo" mode="aspectFill" src="/static/images/user/pj_chooseImage.png" style="width: 120rpx; height: 120rpx; border-radius: 50%;"></image>
					<image v-if="logo" :src="logo" mode="aspectFill" style="width: 120rpx; height: 120rpx; border-radius: 50%;"></image>
					<image src="/static/images/user/normal_right_arrow.png" class="m-l-20"
						style="width: 9rpx; height: 18rpx;"></image>
				</view>
			</view> -->
			<!-- 营业执照 -->
			<view class="fr-s-c w-1" @click="chooseImage(9)" style="border-bottom: 2rpx solid #F4F4F4; padding: 36rpx 0;" v-if="type == 1">
				<text class="left-t">营业执照 <text style="color: #F64949;">*</text></text>
				<view class="fr-e-c flex-1">
					<image v-if="!yyzz" mode="aspectFill" src="/static/images/user/pj_chooseImage.png" style="width: 120rpx; height: 120rpx; border-radius: 50%;"></image>
					<image v-if="yyzz" :src="yyzz" mode="aspectFill" style="width: 200rpx; height: 120rpx; border-radius: 15rpx;"></image>
					<image src="/static/images/user/normal_right_arrow.png" class="m-l-20" style="width: 9rpx; height: 18rpx;"></image>
				</view>
			</view>
			<!-- 所在地 -->
			<view class="fr-s-c w-1" @click="show=true" style="border-bottom: 2rpx solid #F4F4F4;">
				<text class="left-t">所在地 <text style="color: #F64949;">*</text></text>
				<view class="p-input flex-1 fr-b-c" style="height: 100rpx;">
					<text class="flex-1 text-line-1 right-t">{{address || '选择所在地'}}</text>
					<image src="/static/images/user/normal_right_arrow.png" class="m-l-20"
						style="width: 9rpx; height: 18rpx;"></image>
				</view>
			</view>
			<u-picker mode="region" v-model="show" safe-area-inset-bottom @confirm="ensureRegion"></u-picker>
			<!-- 店铺 -->
			<view class="fr-s-c w-1" style="border-bottom: 2rpx solid #f4f4f4; padding: 36rpx 0">
				<text class="left-t">店铺名称<text style="color: #F64949;">*</text></text>
				<input type="text" v-model="name" class="flex-1 right-t" placeholder-class="right-t" placeholder="请输入店铺全称" />
			</view>
			<!-- 行业分类 -->
			<picker @change="bindPickerChange" range-key="name" :value="index" :range="array" class="w-1">
				<view class="fr-s-c" style="border-bottom: 2rpx solid #f4f4f4">
					<text class="left-t">类型<text style="color: #F64949;">*</text></text>
					<view class="p-input flex-1 fr-b-c" style="height: 100rpx">
						<text class="flex-1 text-line-1 right-t">{{ index == -1 ? '选择类型' : array[index] }}</text>
						<image src="/static/images/user/normal_right_arrow.png" class="m-l-20" style="width: 9rpx; height: 18rpx"></image>
					</view>
				</view>
			</picker>
			<view class="faren" style="padding: 36rpx 0" v-if="type == 0">
				<text class="left-t faren_title">上传相关资质<text style="color: #F64949;">*</text></text>
				<view class="faren_flex">
					<view class="faren_flex_item" v-for="(item, index) in QualificationsImgList">
						<view class="choose_img" @tap="chooseImage(3)">
							<image :src="item" class="choose_img_view" mode=""></image>
						</view>
						<u-icon name="close-circle-fill" class="close-circle-fill" @tap="close_img(index)"></u-icon>
					</view>
					<view class="faren_flex_item" >
						<view class="choose_img" @tap="chooseImage(3)">
							<image src="/static/images/user/xiangji.png" class="choose_img_icon" mode=""></image>
							<view class="choose_img_desc">点击拍照/上传</view>
						</view>
					</view>
				</view>
				<view class="faren_flex_right">可上传多图</view>
			</view>

			<!-- 店铺简介 -->
			<view class="fr-s-c w-1" style="border-bottom: 2rpx solid #F4F4F4; padding: 36rpx 0;">
				<text class="left-t">所售商品<text style="color: #F64949;">*</text></text>
				<input type="text" v-model="intro" class="flex-1 right-t" placeholder-class="right-t" placeholder="列举1-4个主营产品，逗号分隔">
			</view>
			<!-- 详细地址 -->
			<view class="fr-s-c w-1" style="border-bottom: 2rpx solid #F4F4F4; padding: 36rpx 0;">
				<text class="left-t">具体地址<text style="color: #F64949;">*</text></text>
				<input type="text" v-model="detail" class="flex-1 right-t" placeholder-class="right-t" placeholder="请输入具体地址">
			</view>

			<!-- 联系人 -->
			<view class="fr-s-c w-1" style="border-bottom: 2rpx solid #f4f4f4; padding: 36rpx 0">
				<text class="left-t">联系人<text style="color: #F64949;">*</text></text>
				<input type="text" v-model="nickname" class="flex-1 right-t" placeholder-class="right-t" placeholder="输入联系人姓名" />
			</view>
			<!-- 联系电话 -->
			<view class="fr-s-c w-1" style="border-bottom: 2rpx solid #f4f4f4; padding: 36rpx 0">
				<text class="left-t">联系电话<text style="color: #F64949;">*</text></text>
				<input type="number" v-model="tel" maxlength="11" class="flex-1 right-t" placeholder-class="right-t" placeholder="输入联系电话" />
			</view>
			<!-- 联系人 -->
			<view class="fr-s-c w-1" style="border-bottom: 2rpx solid #f4f4f4; padding: 36rpx 0" v-if="type == 1"> 
				<text class="left-t">推荐人姓名<text style="color: #F64949;">*</text></text>
				<input type="text" v-model="tj_nickname" class="flex-1 right-t" placeholder-class="right-t" placeholder="输入联系人姓名" />
			</view>
			<!-- 联系电话 -->
			<view class="fr-s-c w-1" style="border-bottom: 2rpx solid #f4f4f4; padding: 36rpx 0" v-if="type == 1">
				<text class="left-t">推荐人电话<text style="color: #F64949;">*</text></text>
				<input type="number" v-model="tj_tel" maxlength="11" class="flex-1 right-t" placeholder-class="right-t" placeholder="输入联系电话" />
			</view>
			<view class="fr-s-c w-1" style="border-bottom: 2rpx solid #f4f4f4; padding: 36rpx 0" v-if="type == 1">
				<text class="left-t">推荐人身份证号<text style="color: #F64949;">*</text></text>
				<input type="number" v-model="tj_code" maxlength="18" class="flex-1 right-t" placeholder-class="right-t" placeholder="请输入推荐人身份证号" />
			</view>
			<!-- 微信号 -->
			<!-- <view class="fr-s-c w-1" style="border-bottom: 2rpx solid #f4f4f4; padding: 36rpx 0">
				<text class="left-t">微信号</text>
				<input type="text" @input="inputchang" v-model="WeChat" class="flex-1 right-t" placeholder-class="right-t" placeholder="输入微信号" />
			</view> -->
			<!-- 身份证号 -->
			<!-- <view class="fr-s-c w-1" style="border-bottom: 2rpx solid #f4f4f4; padding: 36rpx 0">
				<text class="left-t">身份证号</text>
				<input type="number" v-model="IdCard" maxlength="18" class="flex-1 right-t" placeholder-class="right-t" placeholder="输入身份证号" />
			</view> -->
			<view class="faren" style="padding: 36rpx 0">
				<text class="left-t faren_title">法人身份证<text style="color: #F64949;">*</text></text>
				<view class="faren_flex">
					<view class="faren_flex_item">
						<view class="faren_flex_item_title">正面</view>
						<view class="choose_img" @tap="chooseImage(1)" v-if="!ID_front">
							<image src="/static/images/user/xiangji.png" class="choose_img_icon" mode=""></image>
							<view class="choose_img_desc">点击拍照/上传</view>
						</view>
						<view class="choose_img" @tap="chooseImage(1)" v-if="ID_front">
							<image :src="ID_front" class="choose_img_view" mode=""></image>
						</view>
					</view>
					<view class="faren_flex_item">
						<view class="faren_flex_item_title">反面</view>
						<view class="choose_img" @tap="chooseImage(2)" v-if="!ID_opposite">
							<image src="/static/images/user/xiangji.png" class="choose_img_icon" mode=""></image>
							<view class="choose_img_desc">点击拍照/上传</view>
						</view>
						<view class="choose_img" @tap="chooseImage(2)" v-if="ID_opposite">
							<image :src="ID_opposite" class="choose_img_view" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="fr-s-c w-1" style="border-bottom: 2rpx solid #f4f4f4; padding: 36rpx 0">
				<text class="left-t">提现支付宝账号<text style="color: #F64949;">*</text></text>
				<input type="number" v-model="account" maxlength="11" class="flex-1 right-t" placeholder-class="right-t" placeholder="输入提现支付宝账号" />
			</view>
			<view class="fr-s-c w-1" style="border-bottom: 2rpx solid #f4f4f4; padding: 36rpx 0">
				<text class="left-t">真实姓名<text style="color: #F64949;">*</text></text>
				<input type="text" v-model="realname" maxlength="11" class="flex-1 right-t" placeholder-class="right-t" placeholder="输入真实姓名" />
			</view>
			
			<view class="fr-c sub-btn w-1" @click="subInfo">申请入驻</view>
		</view>
		<text style="color: #999999; margin-top: 36rpx; margin-bottom: 30rpx; padding-left: 32rpx" class="fs-22 fm-ali w-1">注：提交成功后两个工作日内答复。</text>
	</view>
</template>

<script>
export default {
	data() {
		return {
			index: -1,
			array: ['个人', '企业'],
			show: false,
			address: '', // 详细地址
			logo: '', // logo
			yyzz: '', // 营业执照
			username: '', // 用户登录后台的账号
			password: '', // 用户登录后台的密码
			name: '', // 商户名称
			tel: '', // 商户电话
			address: '', // 商户地址
			latlong: '', // 经纬度
			worktime: '', // 营业时间
			intro: '', // 商户简介
			detail: '', // 详细地址
			nickname: '', // 联系人姓名
			ID_front: '',
			ID_opposite: '',
			QualificationsImgList: [],
			type: '',
			IdCard: '',
			WeChat:'',
			tj_nickname:'',
			tj_tel:'',
			tj_code:'',
		};
	},
	onLoad(options) {
		if (options.type) this.type = options.type;
		console.log(this.type)
		let ruzhuinfo = uni.getStorageSync('ruzhuinfo')
		if(ruzhuinfo.verify == 4){
			this.name = ruzhuinfo.shopname,
			this.address = ruzhuinfo.city
			 this.nickname = ruzhuinfo.name
			this.tel = 	ruzhuinfo.mobile
			 this.ID_front = ruzhuinfo.front_id
			this.ID_opposite = 	ruzhuinfo.back_id
			this.index = ruzhuinfo.state
			this.ID_front = ruzhuinfo.image
			this.QualificationsImgList = ruzhuinfo.trademark.split(',')
			this.intro = ruzhuinfo.category_str
			this.detail = 	ruzhuinfo.address
		}
	},
	methods: {
		inputchang(e){
			console.log(this.WeChat)
		},
		close_img(index) {
			this.QualificationsImgList.splice(index, 1);
		},
		async chooseImage(n) {
			//#ifdef APP-PLUS			let result = await this.$store.dispatch("quanxian/requestPermissions",'WRITE_EXTERNAL_STORAGE')				console.log(result)			if (result !== 1) return
			this.$store.state.isCAMERA = true			// #endif
				
			let t = this;
			uni.chooseImage({
				count: 1, //默认9
				success: (res) => {
					t.uploadImg(n, res.tempFilePaths[0]);
				}
			});
		},
		uploadImg(n, path) {
			let that = this;
			// 上传图片
			that.$api.get({
				url: '/wanlshop/common/uploadData',
				success: (updata) => {
					// console.log(updata);
					that.$api.upload({
						url: updata.data.uploadurl,
						filePath: path,
						name: 'file',
						formData: updata.data.storage == 'local' ? null : updata.data.multipart,
						success: (res) => {
							let resinfo = JSON.parse(res);
							// console.log(resinfo);
							if (n == 1) {
								this.ID_front = resinfo.data.fullurl;
							} else if (n == 2) {
								this.ID_opposite = resinfo.data.fullurl;
							} else if(n == 9){
								this.yyzz = resinfo.data.fullurl;
							}else{
								this.QualificationsImgList.push(resinfo.data.fullurl);
								// if (this.QualificationsImgList.length >= 2) {
								// 	uni.showToast({
								// 		title: '最多可上传两张',
								// 		icon: 'none'
								// 	});
								// }
							}
						}
					});
				}
			});
		},
		bindPickerChange: function (e) {
			console.log('picker发送选择改变，携带值为', e.detail.value);
			this.index = e.detail.value;
		},
		ensureRegion(e) {
			const { province, city, area } = e;
			let address = province.label + "/"+ city.label +'/'+ area.label;
			this.address = address;
		},
		// 选择地址
		chooseLocation() {
			uni.chooseLocation({
				success: (res) => {
					console.log(res, '+');
					this.latlong = res.latitude + ',' + res.longitude;
					this.address = res.address;
				}
			});
		},
		async subInfo() {
			let content = ''
			if(this.type == 0){
				if(this.address == ''){
					content = '请选择所在地'
				}else if(this.name == ''){
					content = '请填写店铺名称'
				}else if(this.index == -1){
					content = '请选择类型'
				}else if(this.QualificationsImgList.length <=0){
					content = '请上传相关资质'
				}else if(this.intro == ''){
					content = '请填写所售商品'
				}else if(this.detail == ''){
					content = '请填写详细地址'
				}else if(this.nickname == ''){
					content = '请填写联系人姓名'
				}else if(this.tel == ''){
					content = '请填写联系人电话'
				}else if(this.ID_front == ''){
					content = '请上传身份证（正面）'
				}else if(this.ID_opposite == ''){
					content = '请上传身份证（反面）'
				}else if(this.account == ''){
					content = '请填写提现支付宝账号'
				}else if(this.realname == ''){
					content = '请填写真实姓名'
				}
				if(content){
					uni.showToast({
						title:content,
						icon:'none'
					})
					return false
				}
			}else{
				if(this.yyzz == ''){
					content = '请上传营业执照'
				}else if(this.address == ''){
					content = '请选择所在地'
				}else if(this.name == ''){
					content = '请填写店铺名称'
				}else if(this.index == -1){
					content = '请选择类型'
				}else if(this.intro == ''){
					content = '请填写所售商品'
				}else if(this.detail == ''){
					content = '请填写详细地址'
				}else if(this.nickname == ''){
					content = '请填写联系人姓名'
				}else if(this.tel == ''){
					content = '请填写联系人电话'
				}else if(this.tj_nickname == ''){
					content = '请填写推荐人姓名'
				}else if(this.tj_tel == ''){
					content = '请填写推荐人电话'
				}else if(this.tj_code == ''){
					content = '请填写推荐人身份证号'
				}else if(this.ID_front == ''){
					content = '请上传身份证（正面）'
				}else if(this.ID_opposite == ''){
					content = '请上传身份证（反面）'
				}else if(this.account == ''){
					content = '请填写提现支付宝账号'
				}else if(this.realname == ''){
					content = '请填写真实姓名'
				}
				console.log(content)
				if(content){
					uni.showToast({
						title:content,
						icon:'none'
					})
					return false
				}
			}
			console.log('我要提交了')
			// return false 
			let formdata = {
				shopname:this.name,
				city:this.address,
				name: this.nickname,
				mobile: this.tel,
				number: '',
				front_id: this.ID_front,
				back_id:this.ID_opposite, 
				state:this.index,
				image:this.ID_front,
				trademark:this.QualificationsImgList.join(','),
				verify:2,
				wechat:this.WeChat,
				type: Number(this.type)+1,
				category_str:this.intro,
				address:this.detail,
				license:this.yyzz,
				references_name:this.tj_nickname,
				references_mobile:this.tj_tel,
				references_number:this.tj_code,
				account:this.account,
				realname:this.realname
			};
			let flag = true;
			console.log(formdata)
			for (let i in formdata) {
				if(formdata[i] != 0){
					if (i != 'latlong' && !formdata[i]) {
						flag = false;
					}
				}
			}
			if (!flag) return this.$u.toast('请完善对应信息');
			this.$post({
				url: '/wanlshop/shop/apply',
				data: formdata
			}).then((res) => {
				if(res.code == 1){
					uni.setStorageSync('ruzhuinfo',res.data)
					uni.redirectTo({
						url: '/pages/UserCenter/MerchantSettlement/SubSuccess/SubSuccess'
					});
				}
				
			});
		}
	}
};
</script>

<style>
.seller-in {
	width: 569rpx;
	height: 518rpx;
	margin-top: 40rpx;
}

.info-box {
	width: 686rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.1);
	border-radius: 24rpx;
	padding: 34rpx 32rpx;
	margin-top: -180rpx;
}
.faren {
	width: 100%;
}
.faren_title {
	width: 100%;
}
.p-input {
	padding: 36rpx 0rpx;
	font-size: 28rpx;
	font-family: Alibaba;
	color: #333333;
}

.left-t {
	width: 160rpx;
	font-size: 28rpx;
	font-family: Alibaba;
	color: #333333;
}

.right-t {
	font-size: 28rpx;
	font-family: Alibaba;
	color: #999999;
}

.sub-btn {
	height: 100rpx;
	background: linear-gradient(246deg, #fa360a 0%, #fa8c0a 100%);
	box-shadow: 0rpx 6rpx 32rpx 2rpx rgba(250, 74, 20, 0.58);
	border-radius: 50rpx;
	font-size: 32rpx;
	font-family: Alibaba;
	margin-top: 48rpx;
	color: #ffffff;
}
.choose_img {
	width: 290rpx;
	height: 194rpx;
	background: #eeeeee;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	margin-top: 20rpx;
}
.choose_img_view {
	width: 290rpx;
	height: 194rpx;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
}
.choose_img_icon {
	width: 64rpx;
	height: 64rpx;
	display: block;
	margin: 0 auto;
	position: relative;
	top: 44rpx;
}
.choose_img_desc {
	text-align: center;
	margin-top: 54rpx;
	font-size: 22rpx;
	font-family: Source Han Sans CN-Medium, Source Han Sans CN;
	font-weight: 500;
	color: #959595;
}
.faren_flex {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
}
.faren_flex_item {
	position: relative;
}
.faren_flex_item_title {
	font-size: 24rpx;
	font-family: Alibaba PuHuiTi 2-65 Medium, Alibaba PuHuiTi 20;
	font-weight: bold;
	color: #000000;
	margin-top: 20rpx;
}
.faren_flex_right {
	font-size: 22rpx;
	font-family: Alibaba PuHuiTi 2-65 Medium, Alibaba PuHuiTi 20;
	font-weight: normal;
	color: #000000;
	margin-top: 20rpx;
}
.close-circle-fill {
	font-size: 40rpx;
	position: absolute;
	top: 0;
	right: -20rpx;
	color: #fa360a;
}
</style>
